/**
 * author: ywb
 * description:
 * 		单链接标题栏
 * 
 * AIP attributes:
 * 	bg_color: 				背景色的设定		默认:#545c64
 * 	font_color: 			文字颜色设定		默认:#fff
 * 	active_color: 			激活颜色设定		默认:#ffd04b
 *  active_href: 			当前激活的标题	默认:./title1
 *  logo_src: 				标题栏图标		默认:./component/imgs/yq_logo_white.png
 *	title_bar_name:			标题栏名称		默认:XX系统
 *  title_bar_name_color:	标题栏名称颜色	默认和激活色一致
 * 	head_pic: 				登录头像地址		默认 ""
 *  login_href:				登录页面链接地址	默认 "#"
 *
 *  导航内容设定
 * 	contents: [
 *      {
 *	    	title_name: 	标题名称			默认:'title1'
 *			href: 			链接				默认:'./title1'
 *		},{
 *	    	title_name: 	标题名称			默认:'title2'
 *			href: 			链接				默认:'./title2'
 *		}
 *		...
 *  ]
 * 
 *  登录后个人菜单			
 * 	loged_menu: [
	 {
	 	name: 				菜单名,			默认 '退出'
	 	href: 				跳转地址			默认	 "#",
	 	divided: 			是否与之前项分割	默认	 false
	 }
 */
Vue.component(
	"title-bar-one-link",
	{
		data: function(){
			return {
				activeIndex: this.active_href
			};
		},
		methods: {
		  //导航栏选项条转方法
		  handleSelect(key, keyPath) {
			  if(key == "!noJump"){
				  return;
			  }
		    console.log(key, keyPath);
			location.href=key;
		  },
		  //登录后菜单跳转方法
		  handleCommand(command){
			  console.log(command);
			  location.href=command;
		  }
		},
		props:{
			bg_color: {
				type: String,
				default: "#545c64"
			},
			font_color:{
				type: String,
				default: "#fff"
			},
			active_color:{
				type: String,
				default: "#ffd04b"
			},
			contents:{
				type: Array,
				default: [
				{
					title_name: "title1",
					href: "./title1"
				},
				{
					title_name: "title2",
					href: "./title2"
				}
				]
			},
			active_href: {
				type: String,
				default: "./title1"
			},
			title_bar_name: {
				type: String,
				default: "XX系统"
			},
			title_bar_name_color: {
				type: String,
				default: this.active_color
			},
			logo_src: {
				type: String,
				default: "./component/imgs/yq_logo_white.png"
			},
			head_pic: {
				type: String,
				default: "./component/imgs/head_pic.jpg"
			},
			login_href: {
				type: String,
				default: "#"
			},
			loged_oper_menu: {
				type: Array,
				default: function(){
					return [
						{
							name: "退出",
							href: "#",
							divided: false
						}
					];
				}
			}
		},
		template: `
			<el-menu
			  :default-active="activeIndex"
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  :background-color="bg_color"
			  :text-color="font_color"
			  :active-text-color="active_color">
			<el-menu-item disabled :style="{'opacity':1, 'color':active_color, 'font-weight':900, 'font-size':'1.5em', 'cursor':'pointer'}">
				<img :src="logo_src" style="height:45px; line-height:45px">
				{{title_bar_name}}
			</el-menu-item>
			<el-menu-item v-for="(item,ind) in contents" :key="ind" :index="item.href">{{item.title_name}}</el-menu-item>
			<el-menu-item style="float:right;"  v-if="head_pic" index="!noJump">
				<el-dropdown @command="handleCommand">
				  <span class="el-dropdown-link">
				    <img :src="head_pic" style="border-radius:25px;height:50px; line-height:50px">
				  </span>
				  <el-dropdown-menu slot="dropdown" v-if="loged_oper_menu">
					<el-dropdown-item v-for="(item, index) in loged_oper_menu"
						:key="index"
						:command="item.href"
						:divided="item.divided">
						{{item.name}}
					</el-dropdown-item>
				    
				  </el-dropdown-menu>
				</el-dropdown>
				
			
			</el-menu-item>
			<el-menu-item :index="login_href" style="float:right;" v-if="!head_pic">
				<a href="#">登录</a>
			</el-menu-item>
			</el-menu>
		`

	}
);
